<template>
<el-row :gutter="20">
    <el-col :span="1"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" />
    <div class="demo-input-size">
         <el-input
          v-model="input2"
          class="w-50 m-2"
          placeholder="搜索工号/姓名"
          :prefix-icon="Search"/>
    </div></el-col>
    <el-col :span="2"><div class="grid-content ep-bg-purple" /> <el-button type="primary">搜索</el-button></el-col>
    <el-col :span="18"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-table :data="tableData" style="width: 100%" max-height="250">
      <el-table-column fixed prop="ID" label="用户ID" width="150" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="auth" label="拥有权限" width="150" />
      <el-table-column prop="date" label="入职时间" width="120" />
      <el-table-column prop="phone" label="电话号码" width="150" />
      <el-table-column prop="email" label="电子邮箱" width="180" />
      <el-table-column fixed="right" label="Operations" width="120">
            <template #default>
              <el-button link type="primary" size="small" @click="handleClick"
                >Detail</el-button>
              <el-button link type="primary" size="small">Edit</el-button>
            </template>
          </el-table-column>
        </el-table>
    <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="primary">新建用户</el-button></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="primary">信息导入</el-button></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="primary">信息导出</el-button></el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="primary">删除</el-button></el-col>
      </el-row>
  </template>




<script>
export default {
  name: "UserManage"
}
</script>

<script setup>
import { ref } from 'vue'
const input = ref('')
const handleClick = () => {
  console.log('click')
}

const tableData = [
  {
    date: '2016-05-03',
    name: '张三',
    ID: '1101',
    auth: '全部',
    phone: '12345678901',
    email: '123@163.com',
  },
  {
date: '2016-05-07',
    name: '李四',
    ID: '1102',
    auth: '普通',
    phone: '12345678902',
    email: '124@qq.com',  },
  {
    date: '2016-05-08',
        name: '阿杰',
        ID: '1103',
        auth: '所有',
        phone: '11111111111',
        email: '125@qq.com',
  },
  {
    date: '2016-05-09',
        name: '王五',
        ID: '1104',
        auth: '普通',
        phone: '12312312312',
        email: '126@qq.com',
  },
]
</script>

<style scoped>

</style>